<template>
  <div class="Waterstatu">
    <el-header>
      <el-row>
        <el-col :span="24">
          <h1>所有水表状态</h1>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <section class="section_Time">
        <el-row>
          <el-col :span="24">
            <div class="grid-conten">
              <span>
                最后上报时间：
                <span>1533581714000</span>
              </span>
            </div>
          </el-col>
        </el-row>
      </section>
      <section class="section_content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title">设备状态</span>
          </div>
          <div class="text item">
            <el-row :gutter="24" class="wrap_switch">
              <el-col :span="6" class="wrap_Top">
                <el-switch v-model="value1" inactive-text="1-2水表"></el-switch>
                <el-switch v-model="value2" inactive-text="3-4水表"></el-switch>
                <el-switch v-model="value3" inactive-text="5水表"></el-switch>
                <el-switch v-model="value4" inactive-text="6水表"></el-switch>
                <el-switch v-model="value3" inactive-text="5水表"></el-switch>
                <el-switch v-model="value4" inactive-text="6水表"></el-switch>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6" class="wrap_Top">
                <el-switch v-model="value5" inactive-text="7水表"></el-switch>
                <el-switch v-model="value6" inactive-text="8水表"></el-switch>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="title">1-2水表       文字</span>
          </div>
          <div class="text item"></div>
        </el-card>
      </section>
    </el-main>
  </div>
</template>

<script src="../../assets/js/allwatermg/waterstatu.js"></script>

<style scoped lang="scss">
.Waterstatu {
  > .el-header {
    .el-row {
      > .el-col {
        h1 {
          text-align: center;
          font-size: 24px;
          color: #fff;
          font-family: ".PingFang SC";
        }
      }
    }
  }
  .el-main {
    padding: 20px 50px 50px 50px;
    > .section_Time {
      .el-row {
        .el-col {
          span {
            font-size: 24px;
            color: #fff;
            margin-left: 20px;
          }
        }
      }
    }
    > .section_content {
      margin-top: 14px;
      margin-left: 20px;
      .box-card {
        margin-top: 20px;
        .el-card__header {
          .title {
            font-size: 24px;
            color: #000;
          }
        }
        .el-card__body {
          .wrap_switch {
            margin-top: 4px;
          }
          .el-row {
            margin-top: 2%;
            .el-col-6 {
              width: auto;
            }
            .el-col {
              h1 {
                margin-left: 20px;
              }
              .el-switch__core {
                text-align: center;
              }
            }
            .wrap_Top {
              padding-left: 30px !important;
              .el-switch {
                margin-left: 30px;
                border: 1px solid black;
                height: 4pc;
                padding: 9px;
                border-radius: 20px;
                .el-switch__label * {
                  width: 77px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
